/*
 *classification
 *数据直接和 config 耦合（直接和数据索引硬相关），无法扩展
 */
addModule({
    name: "Classification",

    /**
     * 本模块的初始化函数
     */
    init : function() {

        addSceneFunc("Classification-stage1", this.scene1_stage1, this.name, null);
        addSceneFunc("Classification-stage2", this.scene1_stage2, this.name, null);
    },
    //相关配置数据
    config : {
        //散点位置
        pos:[],

        lines : [],   //散点之间的连线
        line_effect_color : null,     //连线特效颜色
        linestyle_color : null,         //连线颜色
        stage1_end_delay : null,    //stage1结束时间(播放时间)
        stage2_end_delay : null,    //stage2结束时间(播放时间)
        background_color : null,    //背景颜色
        nodeColor_firstPart : null,      //第一部分散点颜色(位于中心部分的散点)
        nodeColor_secondPart : null,      //第二部分散点颜色
        nodeColor_thirdPart : null,      //第三部分散点颜色
        nodeColor_forthPart : null,      //第四部分散点颜色

    },
    graphic : {

        opt : {},   //echarts配置项opt

        bigCircle : [], //包着散点的大圈
    },

    
    

    scene1_stage1: function() {
        // 节点间连线线
        var data=[
            {coords:[this.config.pos[0].value,this.config.pos[1].value]},
            {coords:[this.config.pos[0].value,this.config.pos[2].value]},
            {coords:[this.config.pos[0].value,this.config.pos[3].value]},
            {coords:[this.config.pos[1].value,this.config.pos[7].value]},
            {coords:[this.config.pos[1].value,this.config.pos[8].value]},
            {coords:[this.config.pos[2].value,this.config.pos[5].value]},
            {coords:[this.config.pos[2].value,this.config.pos[6].value]},
            {coords:[this.config.pos[3].value,this.config.pos[4].value]},
            {coords:[this.config.pos[4].value,this.config.pos[10].value]},
            {coords:[this.config.pos[7].value,this.config.pos[17].value]},
            {coords:[this.config.pos[8].value,this.config.pos[9].value]},
            {coords:[this.config.pos[9].value,this.config.pos[25].value]},
            {coords:[this.config.pos[10].value,this.config.pos[11].value]},
            {coords:[this.config.pos[11].value,this.config.pos[12].value]},
            {coords:[this.config.pos[11].value,this.config.pos[13].value]},
            {coords:[this.config.pos[13].value,this.config.pos[14].value]},
            {coords:[this.config.pos[13].value,this.config.pos[15].value]},
            {coords:[this.config.pos[15].value,this.config.pos[16].value]},
            {coords:[this.config.pos[17].value,this.config.pos[18].value]},
            {coords:[this.config.pos[18].value,this.config.pos[19].value]},
            {coords:[this.config.pos[18].value,this.config.pos[20].value]},
            {coords:[this.config.pos[20].value,this.config.pos[21].value]},
            {coords:[this.config.pos[20].value,this.config.pos[22].value]},
            {coords:[this.config.pos[22].value,this.config.pos[23].value]},
            {coords:[this.config.pos[22].value,this.config.pos[24].value]},
            {coords:[this.config.pos[25].value,this.config.pos[26].value]},
            {coords:[this.config.pos[26].value,this.config.pos[27].value]},
            {coords:[this.config.pos[26].value,this.config.pos[28].value]},
            {coords:[this.config.pos[26].value,this.config.pos[29].value]},
            {coords:[this.config.pos[29].value,this.config.pos[30].value]},
            {coords:[this.config.pos[30].value,this.config.pos[31].value]},
            {coords:[this.config.pos[30].value,this.config.pos[32].value]},
        ];

        this.config.lines = data;
        //动态光标
        var series = [{
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            symbol:['circle','circle'],
            symbolSize:10,
            effect: {
                show: true,
                period: 1.5,
                trailLength: 0.7,
                color: this.config.line_effect_color,
                symbolSize: 5
            },
            lineStyle: {
                normal: {
                    color: this.config.linestyle_color,
                    width: 1,
                    curveness: 0
                }
            },
            data: data,
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        },{//节点变色
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: this.config.pos,
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_firstPart
            },
            animationDelay: function (idx) {
                return idx * 10 ;
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[10].value,this.config.pos[11].value,this.config.pos[12].value,this.config.pos[13].value,this.config.pos[14].value,this.config.pos[15].value,this.config.pos[16].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_secondPart
            },
            animationDelay: function (idx) {
                return idx * 10+3000 ;
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[17].value,this.config.pos[18].value,this.config.pos[19].value,this.config.pos[20].value,this.config.pos[21].value,this.config.pos[22].value,this.config.pos[23].value,this.config.pos[24].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_thirdPart
            },
            animationDelay: function (idx) {
                return idx * 10+3000 ;
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[25].value,this.config.pos[26].value,this.config.pos[27].value,this.config.pos[28].value,this.config.pos[29].value,this.config.pos[30].value,this.config.pos[31].value,this.config.pos[32].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_forthPart
            },
            animationDelay: function (idx) {
                return idx * 10+3000 ;
            }
        }];
        //非坐标轴标点
        var option = {
            backgroundColor: this.config.background_color,
            animationEasingUpdate: 'bounceInOut',
            tooltip:{
                trigger: 'item'
            },
            xAxis: {
                show : false,
                type : 'value',
                boundaryGap : false,
                min : 0,
                max : 100,
            },
            yAxis: {
                show : false,
                min : 0,
                max : 100,
                type : 'value'
            },
            grid: {
                top : 0,
                right : 0,
                left : 0,
                bottom : 0
            },
            series: series
        };

        myChart.setOption(option);
        this.graphic.opt = option;
        addRenderFunc(this.name + "-1", function (){
            endScene();
        }, {delay : this.config.stage1_end_delay});
       
    },

    scene1_stage2 : function () {

        var circle0 = new echarts.graphic.Circle({
            position: [_width*0.5,_height*0.6],
            scale: [1, 1],
            shape: {
                cx: 0,
                cy: 0,
                r: 0
            },
            style: {
                fill: this.config.nodeColor_firstPart,
                opacity: 0.05
            },
             zlevel: 1009
        });

        var circle1 = new echarts.graphic.Circle({
            position: [_width*0.22,_height*0.25],
            scale: [1, 1],
            shape: {
                cx: 0,
                cy: 0,
                r: 0
            },
            style: {
                fill:this.config.nodeColor_forthPart,
                opacity: 0.05
            },
             zlevel: 1009
        });

        var circle2 = new echarts.graphic.Circle({
            position: [_width*0.21,_height*0.78],
            scale: [1, 1],
            shape: {
                cx: 0,
                cy: 0,
                r: 0
            },
            style: {
                fill:this.config.nodeColor_secondPart,
                opacity: 0.05
            },
             zlevel: 1009
        });

        var circle3 = new echarts.graphic.Circle({
            position: [_width*0.8,_height*0.33],
            scale: [1, 1],
            shape: {
                cx: 0,
                cy: 0,
                r: 0
            },
            style: {
                fill:this.config.nodeColor_thirdPart,
                opacity: 0.05
            },
             zlevel: 1009
        });


        circle0.animate('shape', false).delay(1000)
                .when(1000, {
                    r: _width*0.18
                }).start('cubicOut');
        circle1.animate('shape', false).delay(1000)
                .when(1000, {
                    r: _width*0.14
                }).start('cubicOut');
        circle2.animate('shape', false).delay(1000)
                .when(1000, {
                    r: _width*0.12
                }).start('cubicOut');
        circle3.animate('shape', false).delay(1000)
                .when(1000, {
                    r: _width*0.145
                }).start('cubicOut');



        circle1.animate('style', false).delay(5000)
                .when(1000, {
                    fill: this.config.background_color,
                    opacity: 1
                }).start('linear');
        circle2.animate('style', false).delay(5000)
                .when(1000, {
                    fill: this.config.background_color,
                    opacity: 1
                }).start('linear');
        circle3.animate('style', false).delay(5000)
                .when(1000, {
                    fill: this.config.background_color,
                    opacity: 1
                }).start('linear');

        zr.configLayer(1009, {
            motionBlur: true,
            lastFrameAlpha: 0.8,
        });

        this.graphic.bigCircle[0] = circle0;
        this.graphic.bigCircle[1] = circle1;
        this.graphic.bigCircle[2] = circle2;
        this.graphic.bigCircle[3] = circle3;

        var data=[
            {coords:[this.config.pos[0].value,this.config.pos[1].value]},
            {coords:[this.config.pos[0].value,this.config.pos[2].value]},
            {coords:[this.config.pos[0].value,this.config.pos[3].value]},
            {coords:[this.config.pos[1].value,this.config.pos[7].value]},
            {coords:[this.config.pos[1].value,this.config.pos[8].value]},
            {coords:[this.config.pos[2].value,this.config.pos[5].value]},
            {coords:[this.config.pos[2].value,this.config.pos[6].value]},
            {coords:[this.config.pos[3].value,this.config.pos[4].value]},
            {coords:[this.config.pos[8].value,this.config.pos[9].value]},
            {coords:[this.config.pos[10].value,this.config.pos[11].value]},
            {coords:[this.config.pos[11].value,this.config.pos[12].value]},
            {coords:[this.config.pos[11].value,this.config.pos[13].value]},
            {coords:[this.config.pos[13].value,this.config.pos[14].value]},
            {coords:[this.config.pos[13].value,this.config.pos[15].value]},
            {coords:[this.config.pos[15].value,this.config.pos[16].value]},
            {coords:[this.config.pos[17].value,this.config.pos[18].value]},
            {coords:[this.config.pos[18].value,this.config.pos[19].value]},
            {coords:[this.config.pos[18].value,this.config.pos[20].value]},
            {coords:[this.config.pos[20].value,this.config.pos[21].value]},
            {coords:[this.config.pos[20].value,this.config.pos[22].value]},
            {coords:[this.config.pos[22].value,this.config.pos[23].value]},
            {coords:[this.config.pos[22].value,this.config.pos[24].value]},
            {coords:[this.config.pos[25].value,this.config.pos[26].value]},
            {coords:[this.config.pos[26].value,this.config.pos[27].value]},
            {coords:[this.config.pos[26].value,this.config.pos[28].value]},
            {coords:[this.config.pos[26].value,this.config.pos[29].value]},
            {coords:[this.config.pos[29].value,this.config.pos[30].value]},
            {coords:[this.config.pos[30].value,this.config.pos[31].value]},
            {coords:[this.config.pos[30].value,this.config.pos[32].value]},
        
        ];
    
        var series = [{
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            symbol:['circle','circle'],
            symbolSize:10,
            effect: {
                show: true,
                period: 1.5,
                trailLength: 0.7,
                color: this.config.line_effect_color,
                symbolSize: 5
            },
            lineStyle: {
                normal: {
                    color: this.config.linestyle_color,
                    width: 1,
                    curveness: 0
                }
            },
            data: data
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: this.config.pos,
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_firstPart
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[10].value,this.config.pos[11].value,this.config.pos[12].value,this.config.pos[13].value,this.config.pos[14].value,this.config.pos[15].value,this.config.pos[16].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_secondPart
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[17].value,this.config.pos[18].value,this.config.pos[19].value,this.config.pos[20].value,this.config.pos[21].value,this.config.pos[22].value,this.config.pos[23].value,this.config.pos[24].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_thirdPart
            }
        },{
            type:'graph',
            coordinateSystem: 'cartesian2d',
            data: [this.config.pos[25].value,this.config.pos[26].value,this.config.pos[27].value,this.config.pos[28].value,this.config.pos[29].value,this.config.pos[30].value,this.config.pos[31].value,this.config.pos[32].value,],
            symbolSize:30,
            itemStyle:{
                    color:this.config.nodeColor_forthPart
            }
        }];
        var option = {
            backgroundColor: this.config.background_color,
            animationEasingUpdate: 'bounceInOut',
            animation: false,
            tooltip:{
                trigger: 'item'
            },
            xAxis: {
                show : false,
                type : 'value',
                boundaryGap : false,
                min : 0,
                max : 100,
            },
            yAxis: {
                show : false,
                min : 0,
                max : 100,
                type : 'value'
            },
            grid: {
                top : 0,
                right : 0,
                left : 0,
                bottom : 0
            },
            series: series
        };

            
        addRenderFunc(this.name + "-1", function (){
            myChart.setOption(option,true);
        }, {once:true,delay : 2000});

        addRenderFunc(this.name + "-2", function (){
            zr.remove(this.graphic.bigCircle[0]);
            zr.remove(this.graphic.bigCircle[1]);
            zr.remove(this.graphic.bigCircle[2]);
            zr.remove(this.graphic.bigCircle[3]);
            zr.configLayer(0, {
                motionBlur: false,
                lastFrameAlpha: 0.8,
            });
            zr.configLayer(1009, {
                motionBlur: false,
                lastFrameAlpha: 0.8,
            });
            myChart.clear();
            endScene();
        }, {delay : this.config.stage2_end_delay});
        
                
 
        zr.add(circle0);
        zr.add(circle1);
        zr.add(circle2);
        zr.add(circle3);
    }

});